<style>
    body {
        margin: 0
    }
</style>
<script>//https://stackoverflow.com/questions/304837/javascript-user-selection-highlighting
    function getSafeRanges(dangerous) {
        var a = dangerous.commonAncestorContainer;
        // Starts -- Work inward from the start, selecting the largest safe range
        var s = new Array(0), rs = new Array(0);
        if (dangerous.startContainer != a)
            for (var i = dangerous.startContainer; i != a; i = i.parentNode)
                s.push(i)
                    ;
        if (0 < s.length) for (var i = 0; i < s.length; i++) {
            var xs = document.createRange();
            if (i) {
                xs.setStartAfter(s[i - 1]);
                xs.setEndAfter(s[i].lastChild);
            }
            else {
                xs.setStart(s[i], dangerous.startOffset);
                xs.setEndAfter(
                    (s[i].nodeType == Node.TEXT_NODE)
                        ? s[i] : s[i].lastChild
                );
            }
            rs.push(xs);
        }

        // Ends -- basically the same code reversed
        var e = new Array(0), re = new Array(0);
        if (dangerous.endContainer != a)
            for (var i = dangerous.endContainer; i != a; i = i.parentNode)
                e.push(i)
                    ;
        if (0 < e.length) for (var i = 0; i < e.length; i++) {
            var xe = document.createRange();
            if (i) {
                xe.setStartBefore(e[i].firstChild);
                xe.setEndBefore(e[i - 1]);
            }
            else {
                xe.setStartBefore(
                    (e[i].nodeType == Node.TEXT_NODE)
                        ? e[i] : e[i].firstChild
                );
                xe.setEnd(e[i], dangerous.endOffset);
            }
            re.unshift(xe);
        }

        // Middle -- the uncaptured middle
        if ((0 < s.length) && (0 < e.length)) {
            var xm = document.createRange();
            xm.setStartAfter(s[s.length - 1]);
            xm.setEndBefore(e[e.length - 1]);
        }
        else {
            return [dangerous];
        }

        // Concat
        rs.push(xm);
        response = rs.concat(re);

        // Send to Console
        return response;
    }
    function getElementWrappedByRange(range) {
        // 检查 startContainer 和 endContainer 是否是同一个父节点
        if (range.startContainer !== range.endContainer) {
            return null;
        }

        // 检查 startOffset 和 endOffset 是否指向同一个元素
        if (range.startOffset + 1 !== range.endOffset) {
            return null;
        }
        // 获取被包裹的元素
        const wrappedElement = range.startContainer.childNodes[range.startOffset];

        // 确保获取的节点是一个元素节点
        if (wrappedElement && wrappedElement.nodeType === Node.ELEMENT_NODE) {
            return wrappedElement;
        }

        return null;
    }
    function highlightRange(range) {
        // let ele = getElementWrappedByRange(range)
        // if (ele) {
        //     ele.style.backgroundColor = 'yellow'
        // }
        // else 
        {
            //const span = document.createElement('mark');
            const span = document.createElement('span');
            span.classList.add('hightlight2')
            //跨行时有时会谜之不管用，可能是被子节点的样式覆盖了
            range.surroundContents(span);
        }
    }
    function highlightSelection() {
        var userSelection = window.getSelection().getRangeAt(0);
        var safeRanges = getSafeRanges(userSelection);
        for (var i = 0; i < safeRanges.length; i++) {
            highlightRange(safeRanges[i]);
        }
        safe_luna_recheck_current_html()
    }
    function safe_luna_recheck_current_html() {
        // const prevHovered = document.querySelector('.element-hover');
        // if (prevHovered) {
        //     prevHovered.classList.remove('element-hover');
        // }
        if (window.LUNAJSObject)
            LUNAJSObject.luna_recheck_current_html(document.getElementById('luna_dict_internal_view').innerHTML)
    }

    var highlightMode = false;
    var iswebview2 = false;
    function callvalue() {
        if (window.LUNAJSObject)
            LUNAJSObject.switch_hightlightmode_callback(highlightMode)
    }
    function switch_hightlightmode() {
        console.log(highlightMode)
        highlightMode = !highlightMode;
        if (!highlightMode) removeelewithclass('element-hover')
        if (iswebview2) {
            callvalue()
        }
    }
    callvalue()
    function removeelewithclass(klass) {
        while (true) {
            let eles2 = document.getElementsByClassName(klass)
            if (eles2.length == 0) break
            eles2[0].classList.remove(klass)
        }
    }
    function clear_hightlight() {
        removeelewithclass('hightlight')
        removeelewithclass('hightlight2')
    }
    if (document.addEventListener) {
        function handleClick(e) {
            if (!highlightMode) return
            if (e.target.classList.contains('collapsible-header')) return
            e.preventDefault();
            e.stopPropagation();
            const element = e.target;
            if (element.classList.contains('hightlight')) {
                element.classList.remove('hightlight')
            } else {
                element.classList.add('hightlight')
            }

            element.classList.remove('element-hover');
            safe_luna_recheck_current_html()
        }
        document.addEventListener('click', handleClick);

        function handleMouseMove(e) {
            removeelewithclass('element-hover')
            if (!highlightMode) return
            const target = e.target;
            if (!(target.classList.contains('element-selected') || target.classList.contains('collapsible-header'))) {
                target.classList.add('element-hover');
            }
        }
        document.addEventListener('mousemove', handleMouseMove);

        function handlekeydown(e) {
            if (e.key === 'H' && e.shiftKey && e.ctrlKey) {
                switch_hightlightmode();
            }
        }
        document.addEventListener('keydown', handlekeydown);
    }
</script>
<style>
    .element-hover {
        outline: 2px dashed #ffd700 !important;
        outline-offset: 2px !important;
    }
</style>
<div id="luna_dict_internal_view">
    <style>
        .hightlight {
            background-color: yellow;
            outline: 2px solid #ffd700 !important;
            outline-offset: 2px !important;
        }

        .hightlight2 {
            background-color: yellow;
        }
    </style>
    __luna_dict_internal_view__
    <script>
        const colorSchemeQuery = window.matchMedia('(prefers-color-scheme: dark)');
        function handleColorSchemeChange(e) {
            __luna_dict_internal_handle_bgcolor__
        }
        handleColorSchemeChange(colorSchemeQuery);
        colorSchemeQuery.addEventListener('change', handleColorSchemeChange); 
    </script>
</div>